<template>
  <div class="user">
    <page-search
      :formItems="formItems"
      class="page-search"
      @resetClick="handleResetClick"
      @searchClick="handleSearchClick"
    ></page-search>
    <page-content
      :tableColumnConfig="tableColumnConfig"
      :tableTitle="tableTitle"
      pathName="users"
      ref="pageContentRef"
      @editClick="editClick"
      @newClick="newClick"
    ></page-content>
    <page-dialog
      :dialogConfig="dialogConfigRef.value"
      ref="pageDialogRef"
      :defaultConfig="defaultConfig"
    >
    </page-dialog>
    <div class="test" data-id="test" @click="handleTest(event)">测试</div>
  </div>
</template>

<script lang="ts" setup>
import { formItems } from './config/search.config';
import { pageSearch } from '@/base-ui/pageSearch';
import { pageContent } from '@/base-ui/pageContent';
import { ref, reactive, computed } from 'vue';
import { usePageSearch } from '@/hooks/usePageSearch';
import { tableColumnConfig } from './config/table.config';
import { dialogConfig } from './config/dialog.config';
import { pageDialog } from '@/components/page-dialog';
import type { IDialogType } from './config/type';
import { useStore } from '@/store/index';
/* 搜索 */
const { pageContentRef, handleSearchClick, handleResetClick } = usePageSearch();
/* 设置列表标题 */
const tableTitle = ref('用户列表');
/* 点击新建或者编辑显示不同的选项卡 */
const store = useStore();
const dialogConfigRef = computed(() => {
  /* 选择部门和角色 */

  const departmentItem = dialogConfig.formItems.find(
    (item) => item.field == 'departmentId'
  );
  departmentItem!.options = store.state.entireDepartment.map((item) => ({
    title: item.name,
    value: item.id
  }));
  const roleItem = dialogConfig.formItems.find(
    (item) => item.field == 'roleId'
  );
  roleItem!.options = store.state.entireRole.map((item) => ({
    title: item.name,
    value: item.id
  }));
  //返回ref是为了解决吧isHidden属性加入响应式系统
  return ref(dialogConfig);
});
/* 点击新增和编辑操作 */
const createClick = () => {
  const passwordItem = dialogConfigRef.value.value.formItems.find(
    (item) => item.field == 'password'
  )!;
  passwordItem!.isHidden = true;
};
const editPasswordClick = () => {
  const passwordItem = dialogConfigRef.value.value.formItems.find(
    (item) => item.field == 'password'
  )!;

  passwordItem!.isHidden = false;
};
import { usePageDialog } from '@/hooks/usePageDialog';
const { pageDialogRef, newClick, editClick, defaultConfig } = usePageDialog(
  createClick,
  editPasswordClick
);
const handleTest = (e: any) => {
  console.log(e.target);
};
</script>

<style scoped lang="less">
.user {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: rgb(244, 245, 248);
  .page-search {
    background-color: #fff;
  }
}
</style>
